<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
	content="width=640,user-scalable=no,target-densityDpi=device-dpi">
<title>贺卡</title>
<script type="text/javascript" src="js/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.Jcrop.min.js"></script>
<script type="text/javascript" src="js/swiper.animate.min.js"></script>
<script type="text/javascript" src="js/swiper.min.js"></script>
<script type="text/javascript" src="js/cropper.min.js"></script>
<!--<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>-->
<script type="text/javascript" src="js/commonAjax.js"></script>
<link rel="stylesheet" href="css/animate.min.css" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/jquery.Jcrop.min.css">
<link rel="stylesheet" href="css/swiper.min.css" />
<link rel="stylesheet" href="css/cropper.min.css" />
<script>
	$(function() {
		var $main = $('#main');
		var desW = 640;
		var desH = 960;
		var viewHeight = $(window).height();
		$main.css('height', viewHeight);
		function showMusic() {
			var $music = $('#music');
			var $audio1 = $('#audio1');
			var onoff = true;
			$music.on('touchstart', function() {
				if (onoff) {
					$(this).attr('class', 'active');
					$audio1.get(0).play();
				} else {
					$(this).attr('class', '');
					$audio1.get(0).pause();
				}
				onoff = !onoff;
			});
			$music.trigger('touchstart');
		}
		$("#choose").click(function() {
			if (swiper.activeIndex == 5) {
				swiper.activeIndex = 1;
			} else if (swiper.activeIndex == 0) {
				swiper.activeIndex = 4;
			}
			window.location.href = "tip.html?page=" + swiper.activeIndex;
		});
		$("#arrow").click(function() {
			showMusic();
			$("#main").show();
			swiper = new Swiper('.swiper-container', {
				pagination : '.swiper-pagination',
				centeredSlides : true,
				paginationClickable : true,
				spaceBetween : 30,
				loop : true
			});
			$("#cover").hide();
			$("#arrow").hide();
		})
	})
</script>
<style>
#cover img{
	margin-top: -10px;
	width: 100%;
	height: 100%;
	/* background: url(../img/cover.png) no-repeat; */
	background-size: cover;
	position: absolute;
	z-index: 8;
}

#music.active {
				animation: 1s linear infinite musicMove;
				-webkit-animation: 1s linear infinite musicMove;
			}
			
			@keyframes musicMove {
				0% {
					transform: rotate(0);
				}
				100% {
					transform: rotate(360deg);
				}
			}
			
			@-webkit-keyframes musicMove {
				0% {
					-webkit-transform: rotate(0);
				}
				100% {
					-webkit-transform: rotate(360deg);
				}
			}
			#music {
				width: 70px;
				height: 70px;
				background: url(img/music.png) no-repeat;
				background-size: cover;
				position: absolute;
				top: 20px;
				right: 20px;
				z-index: 8;
			}
			body {
				font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
				background: #535151;
				font-size: 14px;
				margin: 0;
				padding: 0;
			}
			
			.swiper-container {
				width: 100%;
				height: 80%;
				margin: auto;
			}

#main {
	height: 100%;
	width: 100%
}

.swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #535151;
	width: 80%;
	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}

#choose {
	width: 300px;
	padding-left: 190px;
}

.swiper-slide:nth-child(2n) {
	width: 40%;
}

.swiper-slide:nth-child(3n) {
	width: 20%;
}
#arrow img{ width:200px; height:200px;position:absolute; left:260px; bottom:50px; margin-left:-45px; z-index:88;}
</style>
</head>

<body>
	<div id="main" style="display: none">
		<div class="swiper-container" id="container" style="z-index: 8">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<img src="img/modal1.png">
				</div>
				<div class="swiper-slide">
					<img src="img/modal2.png">
				</div>
				<div class="swiper-slide">
					<img  src="img/modal3.png">
				</div>
				<div class="swiper-slide">
					<img src="img/modal4.png">
				</div>
			</div>
			<!-- Add Pagination -->
			<div class="swiper-pagination"></div>
		</div>
		<div id="choose">
			<img alt="" src="img/choose.png">
		</div>
		
		<div id="music">
			<audio id="audio1" src="img/music.mp3" preload="auto" loop></audio>
		</div>
	</div>
	<div id="arrow">
		<img src="img/arrow.gif" />
	</div>
	<div id="cover">
			<img src="img/cover.png" />
		</div>
</body>

</html>